<template>
  <div class="index">
    <header>
      <van-nav-bar
        title="饿了吗"
        left-text="返回"
        right-text="按钮"
        left-arrow
        @click-left="onClickLeft"
        @click-right="onClickRight"
      />
    </header>
    <main>
      <div class="left">
        <ul>
          <li v-for="(item, index) in list" :key="index" 
          :class="index == count ? 'on' : ''"
          @click="count=index"
          >{{item.title}}</li>
        </ul>
      </div>
      <div class="right">
        <div v-for="(item, index) in list[count].children" :key="index">
          <img :src="item.img" alt="">
          <p>￥{{item.name}}</p>
          <p>{{item.price}}</p>
          <p>
            <button :disabled="item.num==0" @click="item.num--">-</button>
            <span>{{item.num}}</span>
            <button @click="item.num++">+</button>
          </p>
        </div>
      </div>
    </main>
    <footer>
      <p>总价：</p>
    </footer>
  </div>
</template>

<script>
import { Toast } from 'vant';
import axios from 'axios'
export default {
    methods: {
        onClickLeft() {
            Toast('返回');
        },
        onClickRight() {
            Toast('按钮');
        },
    },
    data() {
      return {
        list:[],
        count:0
      }
    },
    mounted () {
      axios.get('/list').then((res)=>{
        this.list = res.data
      })
    }
};
</script>

<style lang="scss" scoped>
.index {
  width: 100%;
  height: 100%;
  header {
    width: 100%;
    height: 46px;
    background: #ffffaa;
  }
  main {
    width: 100%;
    height: calc(100% - 96px);
    background: #aad;
    display: flex;
    .left{
      width: 100px;
      height: 100%;
      background: #aaa;
      li{
        text-align: center;
        line-height: 40px;
      }
    }
    .right{
      width: calc(100% - 100px);
      height: 100%;
      background: #ccc;
      overflow: scroll;
      div{
        height: 130px;
      }
    }
  }
  footer {
    width: 100%;
    height: 50px;
    background: #eea;
  }
}
.on{
  color: red;
  background: #faa;
}
</style>